<template>
  <view class="content">
    <van-nav-bar title="代运营" left-text="" :left-arrow="true" placeholder fixed @click-left="onClickLeft" />
    <view
      class="operate"
      :style="{
        height: 'calc(100vh - 230rpx - ' + (safeAreaTop + safeAreaBot) + 'px)',
      }"
    >
      <view class="operate-img">
        <image class="img-box" style="width: 100%" src="https://images.tongzhuangkc.com/tz/operate.png" />
      </view>
      <view class="operate-box">
        <view class="operate-text"
          >当“甩手掌柜”，坐等买家上门<br />升级【超级VIP会员】，即可享受“代运营服务”<br />优先推荐，更多曝光</view
        >
        <image
          class="img-box"
          style="width: 348rpx; height: 48rpx; margin: 0 auto 40rpx"
          src="https://images.tongzhuangkc.com/tz/operate-title1.png"
        />
        <view class="operate-equity">
          <image class="img-box" src="https://images.tongzhuangkc.com/tz/operate-title.png" />
          <view class="equity-text">
            <view class="text-list">
              <text>发帖10条/日</text>
              <text>回复不限次数</text>
              <text>微信群+4</text>
            </view>
            <view class="text-list">
              <text>开通直播</text>
              <text>专属客服</text>
              <text>金V标识</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="operate-opt">
      <view class="opt-btn" @click="goPage">立即购买超级会员，领取服务<text></text></view>
    </view>
  </view>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import TitlePage from '@/components/title/index'
export default {
  components: {
    TitlePage,
  },
  setup() {
    const state = reactive({
      safeAreaTop: 0,
      safeAreaBot: 0,
    })
    const onClickLeft = () => {
      uni.navigateBack({
        delta: 1,
      })
    }
    const goPage = () => {
      uni.navigateTo({
        url: `/subpackage-platform/vip/index`,
      })
    }
    onMounted(() => {
      uni.getSystemInfo({
        success: function (res) {
          state.safeAreaTop = res.safeAreaInsets.top === 20 ? 0 : res.safeAreaInsets.top
          state.safeAreaBot = res.safeAreaInsets.bottom !== 0 ? res.safeAreaInsets.bottom : '20'
        },
      })
    })
    return {
      ...toRefs(state),
      onClickLeft,
      goPage,
    }
  },
}
</script>

<style lang="scss">
.content {
  height: 100vh;
  background: #fff;
}
.operate {
  padding: 0 32rpx;
  height: calc(100vh - 230rpx);
  overflow-y: auto;
  text-align: center;
}
.operate-img {
  height: 500rpx;
  .img-box {
    height: 100%;
  }
}
.operate-text {
  color: #2b303b;
  font-weight: 500;
  font-size: 28rpx;
  line-height: 48rpx;
  text-align: center;
  margin: 40rpx 0;
}
.operate-equity {
  padding: 24rpx;
  background: #ebf2ff;
  .img-box {
    width: 270rpx;
    height: 48rpx;
  }
  .text-list {
    margin-top: 24rpx;
    text {
      display: inline-block;
      min-width: 168rpx;
      font-size: 28rpx;
      color: #2b303b;
      &:nth-child(2) {
        margin: 0 32rpx;
        min-width: 112rpx;
      }
    }
  }
}
.operate-opt {
  padding: 16rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  .opt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 686rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #38acff 0%, #387bff 100%);
    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(56, 122, 255, 0.4);
    border-radius: 40rpx;
    color: #fff;
    font-size: 28rpx;
    text {
      display: inline-block;
      margin-left: 20rpx;
      width: 32rpx;
      height: 32rpx;
      background: url('https://images.tongzhuangkc.com/tz/icon-right1.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
